<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .outer{
            width: 300px;
            border: 10px red solid;
            /* 
            
                BFC（Block Formatting Context）块级格式化环境
                    -BFC是css中一个隐藏的属性，可以为一个元素开启BFC
                        开启BFC，该元素会变成一个独立的布局区域
                        开启BFC后的特点
                            1，开启BFC后的元素，不会被浮动元素覆盖
                            2，开启BFC后的元素，子元素和父元素的外边距不会重叠
                            3，开启BFC后的元素，可以包含浮动的元素
                        - 可以通过一些特殊的方式来开启BFC
                            1,设置元素的浮动(不推荐)
                            2,将元素设置成行内块元素（不推荐）
                            3，将元素的overflow设置为非visible

                总结：父元素通过开启BFC（设置overflow:hidden）来包裹浮动的子元素
                      开启BFC的元素不会被浮动的元素所包裹
                      开启BFC的元素与子元素的外边距不会重叠
            */
            /* float: left; */
            /* display: inline-block; */
            /* overflow: auto; */
            /* overflow: hidden; */
        }

        .inner{
            width: 100px;
            height: 100px;
            background-color: rosybrown;
            /* 高度塌陷问题：
                在浮动布局中，父元素的高度默认是被子元素撑开的
                    当子元素浮动后，其会完全脱离文档流，子元素从文档流中脱离
                        将会无法撑起父元素的高度，导致高度塌陷    

                高度塌陷是浮动布局中常见的一个问题，必须要解决

            */
            /* float: left; */
            overflow: hidden;
        }

        .box3{
            width: 300px;
            height: 300px;
            background-color: seagreen;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner">

        </div>
    </div>

    <div class="box3"></div>
</body>
</html>